<template>
	<div class="matchList">
		<right-header :header-name="headerName" :is-show="true" :trans-number="transNumber"></right-header>
		<el-steps :space="200" :active="1" :center="true" :align-center="true" class="steps">
		  	<el-step title="新建候选名单"></el-step>
		  	<el-step title="确认候选者／等待配型"></el-step>
		  	<el-step title="HLA配型"></el-step>
		  	<el-step title="选择配型患者"></el-step>
		</el-steps>
		<div class="title-wrap clearfix">
			<div class="title">待配型患者</div>
			<div class="btns">
				<el-button type="text" @click="back()">返回修改</el-button>
				<el-badge :value="23" class="badge">
					<div @mouseleave="candidateShow = false">
						<div class="candidate" @mouseover="candidateShow = true" >候选者</div>
					  	<div class="list" v-if="candidateShow">
					  		<el-table
							    :data="tableData"
							    :show-header="false"
							    style="width: 100%">
							    <el-table-column width="70"
							    	prop="name" label="患者姓名" align="center">
							    </el-table-column>
							    <el-table-column width="120"
							      	prop="info" label="基本信息" align="center">
							    </el-table-column>
							    <el-table-column width="100" label="操作" align="center">
							      	<template scope="scope">
							      		<el-button type="primary" @click="deleteItem(scope.$index,scope.row)">删除</el-button>
							      	</template>
							    </el-table-column>
							</el-table>
					  	</div>
					</div>
				</el-badge>
				<el-button type="primary" @click="next()">下一步</el-button>
			</div>
		</div>
		<div class="choose-wrap clearfix">
			<div class="item">
				<span>患者</span>
				<el-input v-model="patient" class="input"></el-input>
			</div>
			<div class="item">
				<span>体重(kg)</span>
				<el-select v-model="weight" placeholder="请选择" class="input">
			      	<el-option label="100以下" value="1"></el-option>
			      	<el-option label="100~300" value="2"></el-option>
			      	<el-option label="130~160" value="3"></el-option>
			      	<el-option label="160以上" value="4"></el-option>
			    </el-select>
			</div>
			<div class="item">
				<span>年龄</span>
				<el-select v-model="weight" placeholder="请选择" class="input">
			      	<el-option label="16岁以下" value="1"></el-option>
			      	<el-option label="16~50" value="2"></el-option>
			      	<el-option label="50~70" value="3"></el-option>
			      	<el-option label="70以上" value="4"></el-option>
			    </el-select>
			</div>
			<div class="item">
				<span>术前四项</span>
				<el-select v-model="weight" placeholder="请选择" class="input">
			      	<el-option label="全阴" value="1"></el-option>
			      	<el-option label="阳性-乙肝" value="2"></el-option>
			      	<el-option label="阳性-丙肝" value="3"></el-option>
			      	<el-option label="阳性-HIV" value="4"></el-option>
			      	<el-option label="阳性-梅毒" value="4"></el-option>
			    </el-select>
			</div>
			<div class="item">
				<span>PRA</span>
				<el-select v-model="weight" placeholder="请选择" class="input">
			      	<el-option label="全阴性" value="1"></el-option>
			      	<el-option label="全阳性" value="2"></el-option>
			      	<el-option label="LabScreen-I-DX阳性" value="3"></el-option>
			      	<el-option label="LabScreen-II-DX阳性" value="4"></el-option>
			    </el-select>
			</div>
		</div>
		<el-table
		    :data="tableData"
		    stripe
		    style="width: 100%">
		    <el-table-column min-width="100px"
		    	prop="name" label="患者姓名" align="center">
		    </el-table-column>
		    <el-table-column min-width="180px"
		      	prop="info" label="基本信息" align="center">
		    </el-table-column>
		    <el-table-column min-width="90px"
		      	prop="PRA" label="PRA" align="center">
		    </el-table-column>
		    <el-table-column min-width="150px"
		      	prop="waitPeriod" label="已登记时间（天）" align="center">
		    </el-table-column>
		    <el-table-column min-width="140px"
		      	prop="telephone" label="联系方式" align="center">
		    </el-table-column>
		    <el-table-column min-width="140px"
		      	prop="address" label="住址" align="center">
		    </el-table-column>
		    <el-table-column width="150px" label="操作" align="center">
		      	<template scope="scope">
		      		<el-button type="primary" @click="addCandidate(scope.$index,scope.row)">加入候选</el-button>
		      	</template>
		    </el-table-column>
		</el-table>
		<div class="pagination-wrap">
			<v-pagination 
				:total='100' 
				:page-size='10' 
				@change='pageChange'
				>				
			</v-pagination>
		</div>

	</div>
</template> 

<style lang='scss' rel='stylesheet/scss' scoped>
	.matchList{
		padding: 0 20px;
		.title-wrap{
			margin-bottom: 20px;
			.title{
				float: left;
				line-height: 37px;
			}
			.btns{
				float: right;
				padding-right: 20px;
				.badge{
					margin-right: 30px;
					.candidate{
						font-size: 14px;
						border: 1px solid #c4c4c4;
						color: #1f2d3d;
						display: inline-block;
					    line-height: 1;
					    white-space: nowrap;
					    cursor: pointer;
					    background: #fff;
					    margin: 0;
					    padding: 10px 15px;
					    border-radius: 4px;
					    &:hover{
					    	border: 1px solid #20a0ff;
					    	color: #20a0ff;
					    }
					}
					.list{
						width: 292px;
						height: 300px;
						position: absolute;
						top: 36px;
						left: -208px;
						z-index: 999;
						border: 1px solid #ccc;
						background: #fff;
					}
				}
			}
		}
		
		.choose-wrap{
			margin-bottom: 20px;
			.item{
				float: left;
				span{
					margin-right: 10px;
				}
				.input{
					width: 145px;
					margin-right: 17px;
				}
			}
		}
	}
</style>

<script>
	import rightHeader from '@/components/rightHeader'
	import pagination from '@/components/pagination'
	export default {
		data() {
			return {
				headerName: '器官配型',
				transNumber: '000016',
				type: this.$route.params.type,
				currentPage: 1,
				patient:'',
				weight:'',
				tableData:[{
					name:'欧阳',
					info:'女 34岁 161cm 56kg',
					PRA:'阳性',
					waitPeriod:'156',
					telephone:'15678972346',
					address:'杭州 上城'
				}],
				candidateShow:false,
				candidateList:[],
			}
		},
		components: {
			'right-header': rightHeader,
			'v-pagination':pagination
		},
		methods: {
			back(){
				var self = this;
				self.$router.push('/kidney');
			},
			next(){
				var self = this;
				self.$router.push('/kidney/waitMatch');
			},
			pageChange(){
				
			},
			showCandidate(){
				this.candidateShow = true
				console.log(this.candidateShow)
			},
			addCandidate(index,row){
				console.log(index,row)
				this.candidateList.push(row)
			},
			deleteItem(index,row){
				this.candidateList.splice(index,1)
			}
		}
	}
</script>
